<template>
    <div>
        {{$route.params.fiction_id}}
        {{detail.title}}
        {{detail.authors}}
        <p>
            {{detail.content}}
        </p>
        <button @click="goRead">阅读</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            detail:{
                title:'',
                authors:'',
                content:''
            },
            id:''
        }
    },
    // watch:{
    //     '$route.params.fiction_id'(newVal,oldVal){
    //         console.log(newVal);
    //         this.$http.get('/api/detail',{params:{fiction_id:newVal}}).then(res => {
    //             if(res.data.code === 1){
    //                 this.detail = res.data.data.item;
    //             }
    //         })
    //     }
    // },
    beforeRouteUpdate (to,from,next){
        console.log("to",to);
        console.log("from",from);
        this.$http.get('/api/detail',{params:{fiction_id:to.params.fiction_id}}).then(res => {
            if(res.data.code === 1){
                this.detail = res.data.data.item;
            }
        })
        next()
    },
    // beforeRouteLeave (to, from, next) {
        // ...
        // let confirm = window.confirm('确定要离开吗？');
        // if(confirm){
        //     next()
        // }else{
        //     next(false)
        // }
    // },
    created(){
        this.id = this.$route.params.fiction_id;
        this.$http.get('/api/detail',{params:{fiction_id:this.id}}).then(res => {
            if(res.data.code === 1){
                this.detail = res.data.data.item;
            }
        })
    },
    methods:{
        goRead(){
            this.$router.push({name:'read',params:{fiction_id:this.id,chapter_id:1}})
        }
    }
    
}
</script>
